<template>
  <div class="login-container">
    <div class="login-left">
      <n-image class="logo-fat" width="360" :src="logoFatImg" preview-disabled />
      <div class="title">业务运维系统</div>
    </div>
    <div>
      <n-form ref="formRef" :model="loginForm" label-placement="left" label-width="80px" class="login-box"
        require-mark-placement="left" :style="{ maxWidth: '640px' }">
        <div class="login-title">欢迎登录</div>
        <div>
          <n-form-item label="账号" path="username"
            :rule="{ required: true, message: '请输入账号!', trigger: ['input', 'blur'] }">
            <n-input v-model:value="loginForm.username" placeholder="请输入用户名或手机号!" />
          </n-form-item>
          <n-form-item label="密码" path="password"
            :rule="{ required: true, message: '请输入密码!', trigger: ['input', 'blur'] }">
            <n-input v-model:value="loginForm.password" placeholder="请输入密码!" type="password"
              show-password-on="mousedown" :input-props="{ autocomplete: 'off' }" />
          </n-form-item>
          <div class="login-btn">
            <n-button type="info" attr-type="submit" @click="onLogin">登录</n-button>
          </div>
        </div>
      </n-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import {FormInst, useMessage} from 'naive-ui';
import SparkMD5 from 'spark-md5';
import {reactive, ref} from "vue";
import {useRouter} from "vue-router";
import logoFatImg from '../assets/images/logoFat.png';
import {getTokenByAccount} from '../config/api';
import {useStore} from "../config/store";

const formRef = ref<FormInst | null>(null)
const message = useMessage()
const store = useStore()
const router = useRouter()
const loginForm = reactive({
  username: "",
  password: "",
});
const onLogin = (e: MouseEvent) => {
  e.preventDefault()
  formRef.value?.validate((errors) => {
    if (!errors) {
      login()
    }
  }).catch(ex => {

  })
};

const login = () => {
  let pwd = SparkMD5.hash(SparkMD5.hash(loginForm.password) + SparkMD5.hash(loginForm.username));
  getTokenByAccount({ account: loginForm.username, pwd }).then(res => {
    store.setLogin( res.token);
    router.push({ path: '/' });
  }).catch(msg => {
    message.error(msg || '未知错误');
  })
}

</script>

<style lang="less" scoped>

.login-container {
  display: flex;
  color: #333;
  min-width: 320px;
  background: url("../assets/images/login_bg.jpg") no-repeat;
}

.logo-fat {
  margin-top: 20%;
}

.login-left {
  display: inline-block;
  width: 50vw;
  height: 100vh;
  text-align: center;
  overflow: hidden;

  .title {
    font-size: 46px;
    font-weight: bold;
    color: #234883;
    line-height: 50px;
    text-align: center;
    margin-top: 15vh;
    margin-left: 5vw;
  }
}

.login-box {
  position: relative;
  margin-top: 35vh;
  border: 1px solid #dcdfe6;
  width: 350px;
  padding: 35px 35px 15px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 25px #909399;

  .login-title {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #234883;
    margin: 0 auto 20px auto;
  }

  .login-btn {
    text-align: center;
  }

}
</style>
